<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>项目详情</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="../../css/sm.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/normal.css" />
    <link rel="stylesheet" type="text/css" href="../../css/projectDetail.css" />
    <link rel="stylesheet" type="text/css" href="../../iconfont/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper-4.2.0.min.css" />
</head>
<style>
.swiper-container {
    display: none;
    width: 100%;
    height: 100%;
    background: #000;
    position: fixed;
    top: 0;
    z-index: 99;
}

.swiper-slide {
    overflow: hidden;
}
.swiper-slide img{
    width: 100%;
}
.closeIcon{
    display: none;
}
.closeIcon img{
    position: absolute;
    right: 1rem;
    top: 1rem;
    height: 1.25rem;
    width: 1.25rem;
    z-index: 999;
}
</style>

<body>
    <div class="page allWarp">
        <div class="content">
            <div class="projectHead">
                <ul>
                    <li>
                        <span class="width20 col999">项目名称:</span>
                        <span class="width80" v-text="projectName"></span>
                    </li>
                    <li>
                        <span class="width20 col999">项目日期:</span>
                        <span class="width80" v-text="capitalizes(createTime)"></span>
                    </li>
                    <li>
                        <span class="width20 col999">客户姓名:</span>
                        <span class="width80" v-text="customerName"></span>
                    </li>
                    <li>
                        <span class="width20 col999">联系电话:</span>
                        <span class="width80" v-text="customerPhone"></span>
                    </li>
                    <li>
                        <span class="width20 col999">客户地址:</span>
                        <span class="width80" v-text="customerAddress"></span>
                    </li>
                </ul>
            </div>
            <div class="projectHead top10">
                <ul>
                    <li>
                        <span class="width20 col999">销售名称:</span>
                        <span class="width80" v-text="salerName"></span>
                    </li>
                    <li>
                        <span class="width20 col999">销售电话:</span>
                        <span class="width80" v-text="phone"></span>
                    </li>
                </ul>
            </div>
            <div class="dynamic">
                <span>项目动态</span>
                <span class="colorange" style="display: flex; align-items: center;" onclick="move()">项目全部节点<i class="iconfont icon-arrow-right"></i></span>
            </div>
            <div class="trackList" style="margin-bottom: 3rem" v-if="nodeList.length != '0' ">
                <ul class="trackListUl">
                    <li v-for="item in nodeList" v-if="item.deleted == 0  && item.status != 1 ">
                        <p class="font12 col999 lineheight20 dot around">
                            <p class="col999 font14" v-text="capitalize(item.createTime)"></p>
                            <p class="font14">
                                <span v-text="item.nodeName"></span>
                                <span class="colorange">
                                    负责人: <span v-for="items in item.nodeDutyList"><span v-text="items.dutyUser" class="right5"></span></span>
                                </span>
                            </p>
                            <div class="top10" v-for="items in item.logList">
                                <p class="col999 font12">
                                    <span v-text="capitalize(items.createTime)"></span>
                                    <span v-text="items.createUser"></span>
                                </p>
                                <p class="font12" v-text="items.description"></p>
                                <p>
                                    <span v-for="(itemss, index) in items.fileList" @click="openPic(items.fileList,index)">
                                        <img :src="itemss.filePath" alt="" class="imgIcon" :data-filePath="itemss.filePath">
                                    </span>
                                </p>
                            </div>
                        </p>
                    </li>
                </ul>
            </div>
            <div class="doJob" onclick="doJob()" v-if="status == 1">开始派工</div>
        </div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item in orderPictureVoList">
                    <div class="swiper-zoom-container">
                        <img v-bind:src="item.filePath">
                    </div>
                </div>
            </div>
        </div>
        <div class="closeIcon" @click="closePic()">
            <img src="../../img/X@2x.png" alt="">
        </div>
    </div>
    
    <script type="text/javascript" src="../../js/zepto.js"></script>
    <script type="text/javascript" src="../../js/sm.min.js"></script>
    <script type="text/javascript" src="../../js/vue.min.js"></script>
    <script type="text/javascript" src="../../js/ajax.js"></script>
    <script type="text/javascript" src="../../js/back.js"></script>
    <script type="text/javascript" src="../../js/swiper-4.2.0.min.js"></script>
    <!-- <script type="text/javascript" src="../../js/contractAlert.js"></script> -->
    <script type="text/javascript">
        var projectCode = GetQueryString("projectCode");
        var showDetail = GetQueryString("showDetail"); // 1 仅查看 2 新建项目完成跳转到详情
        var role = GetQueryString("role");
        // 项目Code
        // var projectCode = '3f58249c6f2445148c3090eb62e00b9a';




        var demo = new Vue({
            el: '.allWarp',
            data: {
                projectName: '',            //项目名称
                createTime: '',            //项目日期
                customerName: '',           //客户姓名
                customerPhone: '',          //联系电话
                customerAddress: '',        //客户地址
                salerName: '',              //销售名称
                phone: '',                  //销售电话
                nodeList: '',               //节点
                status:'',
                nodeDataOne:'',
                showImg:false,
                ImgUrl:'',
                orderPictureVoList:[],
            },
            methods:{
                openPic:function(val,index){ 
                    demo.orderPictureVoList = val;
                    $(".swiper-container").show();
                    $(".closeIcon").show();
                    var swiper = new Swiper('.swiper-container', {
                        zoom: true,
                        observer:true,//修改swiper自己或子元素时，自动初始化swiper
                        observeParents:true,//修改swiper的父元素时，自动初始化swiper
                        initialSlide : index,
                    });
                },
                closePic:function(){
                    $(".swiper-container").hide();
                    $(".closeIcon").hide();
                }
            },
            beforeCreate: function() {
                init();
            }
        })



        // 项目详情
        function init(){
            var params = {};
            params.projectCode = projectCode;
            kfAjaxGet.projectDetail(params, function(json) {
                if (json.code == 200) {
                    var data = json.data;
                    demo.projectName = data.projectName;
                    demo.createTime = data.createTime;
                    demo.customerName = data.customerName;
                    demo.customerPhone = data.customerPhone;
                    demo.customerAddress = data.customerAddress;
                    demo.salerName = data.salerName;
                    demo.phone = data.phone;
                    demo.nodeList = data.nodeList;
                    console.log(demo.nodeList.length)
                    demo.status = data.status;
                } else if (checkcode(json.code)) {

                } else {
                    $.toast(json.message);
                }
            })
        }

        function openPic(val){
            console.log(val)
            var index;
            var _that = $(event.currentTarget);
            demo.orderPictureVoList = _that.attr("data-fileList");
            index = _that.attr("data-index");
            
            return;
            $(".swiper-container").show();
            $(".closeIcon").show();
            var swiper = new Swiper('.swiper-container', {
                zoom: true,
                observer:true,//修改swiper自己或子元素时，自动初始化swiper
                observeParents:true,//修改swiper的父元素时，自动初始化swiper
                initialSlide : index,
            });
        }

        // 点击图片
        function showImg(){
            var _that = $(event.currentTarget);
            demo.ImgUrl = _that.attr("data-filePath");
            console.log(_that)
            demo.showImg = true;
        }

        // 关闭图片
        function closeImg(){
            demo.showImg = false;
        }

        //跳转节点列表
        function move(){
            window.location = 'allNode.html?projectCode='+projectCode+'&role='+role;
        }

        function doJob(){
            if(demo.nodeList.length == 0){
                $.toast("您还没有添加项目节点无法派工,请在项目全部节点中添加节点");
                return false;
            }
            showContractAlert();
        };
        $(function(){
            $('#gohome').on('click',function(){
                window.location = 'myProject.html?role='+role;
            })
        })
        
    </script>
</body>
</html>